<!DOCTYPE html>
<html>

<head>
  <title>用户详情</title>
  <style>
    body {
      padding: 20px;
      font-family: Arial, sans-serif;
    }

    .back-btn {
      display: inline-block;
      padding: 8px 16px;
      background: #1a73e8;
      color: white;
      text-decoration: none;
      border-radius: 4px;
      margin-bottom: 15px;
      margin-right: 10px;
    }

    .user-info {
      margin-top: 20px;
      padding: 20px;
      background: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0.1);
      border-radius: 8px;
      line-height: 1.6;
    }

    .info-item {
      margin: 15px 0;
    }

    .info-item strong {
      display: inline-block;
      width: 100px;
      color: #333;
      font-weight: 500;
    }
  </style>
</head>

<body>
  <a href="dashboard.html" class="back-btn">返回用户管理</a>
  <div class="user-info">
    <h2 id="username-header"></h2>
    <div class="info-item">
      <strong>注册时间：</strong> <span id="registerTime"></span>
    </div>
    <div class="info-item">
      <strong>是否管理员：</strong> <span id="isAdmin"></span>
    </div>
    <!-- 未来可扩展更多字段：邮箱、手机号、密保问题等 -->
  </div>

  <script>
    // 从URL获取用户名参数（如 ?username=alice）
    const params = new URLSearchParams(window.location.search);
    const username = params.get('username');

    // 模拟用户数据（实际需从后端接口获取）
    const users = [
      { username: 'alice', registerTime: '2023-10-01 14:20', isAdmin: false },
      { username: 'bob', registerTime: '2023-10-05 09:30', isAdmin: true },
      { username: 'charlie', registerTime: '2023-10-10 16:45', isAdmin: false }
    ];

    // 查找对应用户并填充信息
    const user = users.find(u => u.username === username);
    if (user) {
      document.getElementById('username-header').textContent = `用户详情 - ${user.username}`;
      document.getElementById('registerTime').textContent = user.registerTime;
      document.getElementById('isAdmin').textContent = user.isAdmin ? '是' : '否';
    } else {
      alert('用户不存在！');
      window.location.href = 'dashboard.html';
    }
  </script>
</body>

</html>